<template>
    <div>
        <common-banner name="产品中心" :breads="breads"></common-banner>
        <div class="letter-nav-wrapper">
            <div class="letter-nav">
                <ul>
                    <li
                        v-for="letter in letters"
                        :key="letter"
                        :class="{ active: activeLetter === letter }"
                        @click="handleClick(letter)"
                    >
                        {{ letter }}
                    </li>
                </ul>
            </div>
        </div>
        <div class="page-center product-list">
            <ul>
                <li v-for="item in varieties" :key="item.id">
                    <a :href="`/productlist?id=${item.id}`">{{ item.name }}</a>
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import CommonBanner from '@/components/CommonBanner.vue'
const breads = ref([{ name: 'products', label: '产品中心', to: false }])
document.title = '产品中心'
const letters = ref([
    'A',
    'B',
    'C',
    'D',
    'E',
    'F',
    'G',
    'H',
    'I',
    'J',
    'K',
    'L',
    'M',
    'N',
    'O',
    'P',
    'Q',
    'R',
    'S',
    'T',
    'U',
    'V',
    'W',
    'X',
    'Y',
    'Z',
])
const activeLetter = ref('A')
const varieties = ref([
    {
        id: 1,
        name: '阿比特龙',
    },
    {
        id: 2,
        name: '阿比多尔',
    },
    {
        id: 3,
        name: '阿苯达唑',
    },
    {
        id: 4,
        name: '阿德福韦酯',
    },
    {
        id: 5,
        name: '昂丹司琼',
    },
    {
        id: 6,
        name: '阿尔维林',
    },
    {
        id: 7,
        name: '阿戈美拉汀',
    },
    {
        id: 8,
        name: '阿尼芬净',
    },
    {
        id: 9,
        name: '阿力甜',
    },
    {
        id: 10,
        name: '阿伐那非',
    },
    {
        id: 11,
        name: '阿昔洛尔',
    },
    {
        id: 12,
        name: '阿来替尼',
    },
    {
        id: 13,
        name: '阿法替尼',
    },
    {
        id: 14,
        name: '阿福特罗',
    },
    {
        id: 15,
        name: '阿扎那韦',
    },
    {
        id: 16,
        name: '安非他酮',
    },
    {
        id: 17,
        name: '安普霉素',
    },
    {
        id: 18,
        name: '阿伐曲泊帕',
    },
    {
        id: 19,
        name: '阿格列汀',
    },
    {
        id: 20,
        name: '阿加曲班',
    },
    {
        id: 21,
        name: '阿普司特',
    },
    {
        id: 22,
        name: '安普列那韦',
    },
    {
        id: 23,
        name: '奥卡西平',
    },
    {
        id: 24,
        name: '阿卡波糖',
    },
    {
        id: 25,
        name: '阿考替胺',
    },
    {
        id: 26,
        name: '艾拉莫德',
    },
    {
        id: 27,
        name: '艾杜糖醇',
    },
    {
        id: 28,
        name: '阿立呱唑',
    },
    {
        id: 29,
        name: '阿莫奈韦',
    },
    {
        id: 30,
        name: '阿莫二奎',
    },
])

const handleClick = (letter) => {
    activeLetter.value = letter
    // TODO
    varieties.value = [
        {
            id: 100,
            name: '贝尼地平',
        },
    ]
}
</script>
<style lang="scss" scoped>
.letter-nav-wrapper {
    text-align: center;
    width: 100%;
    padding: 10px 0;
}
.letter-nav {
    display: inline-block;
    ul {
        list-style: none;
        padding: 0;
        margin: 0;

        &::after {
            content: '';
            display: block;
            clear: both;
        }

        li {
            float: left;
            padding: 5px 15px;
            font-size: 14px;
            padding: 5px 8px;
            margin: 5px;
            color: #333;
            font-size: 16px;
            border: 1px solid #efefef;
            cursor: pointer;

            &:hover {
                color: #409eff;
            }

            &.active {
                background-color: #0d87dc;
                color: #fff;
            }
        }
    }
}

.product-list {
    margin-bottom: 20px;
    ul {
        list-style: none;
        padding: 0;
        margin: 0;

        &::after {
            content: '';
            display: block;
            clear: both;
        }

        li {
            float: left;
            width: 14.285714%;
            padding: 10px;
            box-sizing: border-box;
            text-align: center;
            color: #333;
            font-size: 16px;
            line-height: 1.5;

            a {
                color: #333;
            }

            a:hover {
                color: #00a7e1;
            }
        }
    }
}
</style>
